<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$Title$</title>
</head>
<body>
<form method="POST" enctype="multipart/form-data">
  {% csrf_token %}
  {{ form.as_p }}
  <button type="submit" >提交</button>
</form>
<img src="/DetectImage" alt="这里输出要检测的图片" id="imgshow">
<input type="text" id="username" placeholder="这里输入id">
<button type="button" id="inference">点击这里输出检测后图片</button>
<input type="text" name="username" id="user_name" placeholder="这里输入查询的id">
<p id="result"></p>
<script>
  document.getElementById("user_name").addEventListener("input",function(){//先得到输入框的id之后通过"input"获取关键字 这里"input"是不能更改的 可取click等参数
    const keyword = this.value.trim(); // 之后再取监听器中的关键字 trim()表示去空格
    const result = document.getElementById("result");  // 取候选框
    if ( keyword === "") {
      result.innerHTML = ""
    }
    else{
      fetch("/hintbox/?q="+keyword)//把keyword传给后端url
              .then(response => {
        if (!response.ok) { throw Error(response.statusText);
        } else {
          return response.json();}
      })
              .then(data => {
        if (data.length > 0) {
          result.innerHTML=data.map(item=>`<div>${item}</div>`).join("");//``反引号用来解析${item} ``是模板字符串（Template Literal） 的语法
        } else {
        result.innerHTML = "未查找到相关内容"}
      })
              .catch(error => {
                result.innerHTML = `${error.message}`;
              })
    }
  })


  document.getElementById("inference").onclick = function(){
    const username = document.getElementById("username").value.trim();
    fetch("/inference/?user="+username)
            .then(response =>
    {
      if (response.ok) {
        return response.json();
      } else {
      return Error(response.statusText);
      }
    }
    )
            .then(data => {
      if (data.processing_url) {
        document.getElementById("imgshow").src=data.processing_url;
      }
      else{
        return Error(data.statusText);
      }
    }).catch(error => {
      console.log(error);
    })
  };
</script>
</body>
</html>